<template >
    <div class="info-container">
      <el-divider></el-divider>
      <!-- 更新列表 -->
      <el-table :data="userdata.userlist" stripe style="width: 80%" border
                :header-cell-style="{background:'rgb(178, 147, 147)',color:'rgb(57, 50, 50)'}">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="userName" label="用户名"></el-table-column>
        <el-table-column prop="operation" label="操作"></el-table-column>
        <el-table-column prop="operand" label="操作对象"></el-table-column>
        <el-table-column prop="old" label="旧内容"></el-table-column>
        <el-table-column prop="new" label="新内容"></el-table-column>
        <el-table-column prop="time" label="修改时间"></el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="page">
        <el-pagination
            layout="total, prev, pager, next"
            :total="this.userdata.total"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pagesize"
        >
        </el-pagination>
      </div>
    </div>
  </template>
  
  <script>
  import requests from '@/api/ajax'
  export default {
    name: 'Usermanage',
    data() {
      return{
        userdata: {
          userlist: [],
          total: 0
        },
        selectForm: {
          name: '',
          phone: ''
        },
        currentPage: 1, //当前页 刷新后默认显示第一页
        pagesize: 8,
      }
    },
    created() {
      this.getUserList()
    },
    methods: {
      getUserList() {
        requests.get('/users/getUsers',{
          params: {
            page: 1,
            pageSize: 8,
            name: this.selectForm.name,
            phone: this.selectForm.phone
          }
        }).then(
            (res) => {
              // console.log(this.currentPage)
              // console.log(res.data.records)
              this.userdata.userlist = res.data.records
              this.userdata.total = res.data.total
            }
        )
      },
      handleCurrentChange(currentPage) { // 跳转页面
        this.currentPage = currentPage
        // console.log(this.currentPage)
        requests.get('/users/getUsers',{
          params: {
            page: this.currentPage,
            pageSize: 8,
            name: this.selectForm.name,
            phone: this.selectForm.phone
          }
        }).then(
            (res) => {
              // console.log(this.currentPage)
              // console.log(res.data.records)
              this.userdata.userlist = res.data.records
              this.userdata.total = res.data.total
            }
        )
      },
    }
  }
  </script>
  
  <style lang="less" scoped>
  .info_container{
    height: 400px;
    width: 300px;
    margin-left: 200px;
    margin-top: 100px;
    font-size: larger;
    text-align: center;
  }
  .page{
    margin-left: 600px;
  }
  .select-text {
    padding-top: 10px;
  }
  
  </style>